<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>App下载</title>
  <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
  <script type="text/javascript">
    ;
    (function () {
      updateFontSize()

      function updateFontSize() {
        var width = document.documentElement.getBoundingClientRect().width
        var fontSize = width / 7.5
        if (fontSize > 70) {
          fontSize = 70
        }
        document.documentElement.style.fontSize = fontSize + 'px'
      }
      window.onresize = function () {
        updateFontSize()
      }
    })()
  </script>
</head>

<body>
  <div class="bgPhone"></div>
  <div class="downloadBgi">
    <div class="downloaBtnS">
      <button class="androidBtn" id="androidBtn">Android版本下载</button>
      <button class="IOSBtn" id="IOSBtn">iOS版本下载</button>
    </div>
    <button onclick="openApp()" class="openAppBtn">已下载APP，直接打开</button>
  </div>
  <div class="mask" id="tip">
    <div class="modal-content">
      <div class="modal-header">提示</div>
      <div class="modal-p1">请用手机浏览器打开本页面~</div>
      <div class="modal-p2">给您带来不便，敬请谅解，祝您生活愉快！</div>
      <div class="modal-ok-btn" id="ok">我知道了</div>
      <div class="modal-close-btn" id="close">×</div>
    </div>
  </div>
</body>
<style>
  html {
    height: 100%;
    overflow: hidden;
  }

  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url(./images/background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    position: relative;
    overflow: hidden;
  }

  .bgPhone {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 12%;
    left: 50%;
    background-image: url('./images/phone.png');
    background-repeat: no-repeat;
    background-size: 100%;
    transform: translateX(-50%);
  }

  .downloadBgi {
    width: 100%;
    height: 4.5rem;
    background-image: url(./images/downloadBgi.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    background-color: #ebca85;
    position: fixed;
    bottom: 0;
  }

  .downloaBtnS {
    width: 100%;
    position: absolute;
    bottom: 1.5rem;
    text-align: center;
  }

  .androidBtn,
  .IOSBtn {
    display: inline-block;
    width: 43%;
    height: 0.82rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.05rem;
    font-size: 0.3rem;
    border: none;
    outline: none;
    font-weight: bold;
    color: #ebca85;
  }

  .IOSBtn {
    margin-left: 0.1rem;
  }

  .openAppBtn {
    display: inline-block;
    width: 90%;
    height: 0.82rem;
    background: #f87b44;
    border-radius: 0.05rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    bottom: 0.43rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .modal-content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 6rem;
    height: 4rem;
    margin: auto;
    background-color: #fff;
    text-align: center;
    color: #333;
    border-radius: 0.06rem;
  }

  .modal-header {
    font-size: 0.32rem;
    line-height: 1.5rem;
  }

  .modal-p1 {
    font-size: 0.32rem;
  }

  .modal-p2 {
    font-size: 0.26rem;
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
  }

  .modal-ok-btn {
    width: 5.7rem;
    margin: auto;
    font-size: 0.32rem;
    padding: 0.39rem 0;
    border-top: 1px solid #333;
  }

  .modal-close-btn {
    position: absolute;
    font-size: 0.56rem;
    top: 0;
    right: 0.2rem;
  }
</style>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    var catid = getUrlString('catid')
    var catname = getQueryString('catname')
    var category_status = getUrlString('category_status')
    var ctype = getUrlString('ctype')
    if (ctype) {
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'http://tuiguang.brandzw.com:8090/accesslog.js'
      document.getElementsByTagName('head')[0].appendChild(script)
    }
    var appUrl = 'brandzw://com.shanzhou.brandzw?' + catid + '&' + catname + '&' + category_status + '&1'
    document.getElementById('androidBtn').setAttribute('data-clipboard-text', appUrl)
    new ClipboardJS('#androidBtn')
    document.getElementById('androidBtn').addEventListener('click', AndroidDownload)

    document.getElementById('IOSBtn').setAttribute('data-clipboard-text', appUrl)
    new ClipboardJS('#IOSBtn')
    document.getElementById('IOSBtn').addEventListener('click', IOSDownload)

    // 关闭提示框
    document.getElementById('ok').addEventListener('click', function () {
      document.getElementById('tip').style.display = 'none'
    })
    document.getElementById('close').addEventListener('click', function () {
      document.getElementById('tip').style.display = 'none'
    })
  })

  function AndroidDownload() {
    var str = navigator.userAgent.toLowerCase()
    var ver = /(ipad|iphone|ipod)/i.test(str)
    if (!ver) {
      //非IOS系统
      window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.shanzhou.brandzw'
    } else {
      alert('请下载iOS版本')
    }
  }

  function IOSDownload() {
    // window.location.href = "";
    var str = navigator.userAgent.toLowerCase()
    console.log(str)
    var ver = /(ipad|iphone|ipod)/i.test(str)
    if (!ver) {
      //非IOS系统
      alert('请下载安卓版本')
    } else {
      window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.shanzhou.brandzw'
    }
  }

  function openApp() {
    // 如果是微信浏览器 给个提示
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      document.getElementById('tip').style.display = 'block'
      return
    }
    var catid = getUrlString('catid')
    var catname = getQueryString('catname')
    var category_status = getUrlString('category_status')

    var appUrl = 'brandzw://com.shanzhou.brandzw?' + catid + '&' + catname + '&' + category_status + '&1'

    var str = navigator.userAgent.toLowerCase()
    var ver = str.match(/cpu iphone os (.*?) like mac os/)
    if (!ver) {
      // 安卓系统
      setTimeout(function () {
        var iframe = document.createElement('iframe')
        iframe.src = appUrl
        iframe.style.display = 'none'
        document.body.appendChild(iframe)
        // window.location.href = appUrl;
      }, 20)
    } else {
      // ios9以上版本
      if (parseInt(ver[1]) > 9) {
        window.location.href = appUrl
      } else {
        setTimeout(function () {
          var iframe = document.createElement('iframe')
          iframe.src = appUrl
          iframe.style.display = 'none'
          document.body.appendChild(iframe)
        }, 20)
      }
    }
  }

  function getUrlString(name) {
    var reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`)
    var r = window.location.search.substr(1).match(reg)
    if (r != null) return unescape(r[2])
    return null
  }

  function getQueryString(name) {
    var reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`)
    var r = window.location.search.substr(1).match(reg)
    if (r != null) return decodeURI(r[2])
    return null
  }

  function copy(el) {
    var range = document.createRange()
    range.selectNode(el)
    var selection = window.getSelection()
    if (selection.rangeCount > 0) selection.removeAllRanges()
    selection.addRange(range)
    document.execCommand('copy')
  }
</script>

</html>